<template>
  <div class="login">
    <div class="loginTitle">欢迎加入，请登录</div>
    <div class="loginItem">
      <input type="text" v-model="params.phone" maxlength="11" placeholder="请输入手机号">
      <div class="err" :class="phone.err && 'isErr'" />
      <p class="signInErrTips" v-if="phone.error">{{phone.errTips}}</p>
    </div>
    <div class="loginItem">
      <input type="password" v-model="params.password" maxlength="20" placeholder="请输入密码">
      <div class="err" :class="password.error && 'isErr'"></div>
      <p class="signInErrTips" v-if="password.error">{{password.errTips}}</p>
    </div>
    <button class="btn" @click="btnClick">登录</button>
    <div class="forgetPwd"><span class="span" @click="forgetPasswordClick">忘记密码？</span></div>
    <div v-if="!fromHn">
      <div class="signInHelp">没有账户？</div>
      <div class="signInHelpInfo">
        <span>请登录蚂蚁</span><a href="http://ec.chng.com.cn/ecmall/" class="hn">电子商务平台</a><span>，发起融资申请 即可注册为会员</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import Cookies from 'cookies-js'

export default {
  name: 'SignIn',
  data () {
    return {
      btnClicked: false,
      disabled: false,
      params: {
        phone: '',
        password: ''
      },
      phone: {
        error: false,
        errTips: '请输入正确的手机号'
      },
      password: {
        error: false,
        errTips: '密码呢'
      },
      forgetPassword: {

      }
    }
  },
  computed: {
    fromHn () {
      return this.$route.query.companyid
    }
  },
  watch: {
    'params.phone' (value) {
      if (!this.btnClicked) {
        return
      }
      if (this.Utils.phoneStrReg.test(value)) {
        this.phone.error = true
        this.phone.errTips = '请输入正确的手机号'
      } else {
        this.phone.error = false
        this.phone.errTips = ''
      }
    }
  },
  methods: {
    btnClick () {
      this.btnClicked = true

      this.checkPhone(this.params.phone)
      this.checkPassword(this.params.password)

      const canPost = this.checkPhone(this.params.phone) && this.checkPassword(this.params.password)

      if (canPost) {
        this.postSignIn()
      }
      // this.$router.push('/welcome')
    },
    checkPhone (value) {
      if (this.Utils.isNull(value)) {
        this.phone.error = true
        this.phone.errTips = '请输入手机号'
        return false
      }
      if (!this.Utils.phoneStrReg.test(value)) {
        this.phone.error = true
        this.phone.errTips = '请输入正确的手机号'
        return false
      }
      return true
    },
    checkPassword (value) {
      if (this.Utils.isNull(value)) {
        this.password.error = true
        this.password.errTips = '请输入密码'
        return false
      }
      if (!(/(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{2,20}$/.test(value)) ||
       !(value.length >= 6 && value.length <= 20) ||
       /\s/.exec(value)) {
        this.password.error = true
        this.password.errTips = '请输入正确的密码'
        return false
      }
      return true
    },
    postSignIn () {
      this.disabled = true
      axios.post('/api/user/login', qs.stringify({
        username: this.params.phone,
        password: this.params.password
      })).then(res => {
        if (res.data.error) {
          this.disabled = false
          this.password.error = true
          this.password.errTips = res.data.error.msg
        } else {
          Cookies.set('username', res.data.data.username)
          Cookies.set('roleId', res.data.data.roleId)
          Cookies.set('mobile', res.data.data.mobile)
          this.$message.success('登录成功' + Cookies.get('username'))
          if (this.$route.query.companyApplyId) {
            //
          } else {
            this.disabled = false
            this.$router.push('/welcome')
          }
        }
      })
    },
    forgetPasswordClick () {
      console.log('x')
    }
  }
}
</script>
<style lang="less" scoped>
.forgetPwd {
  margin-top: 18px;
  text-align: right;
  color: #115AD4;
  padding-right: 48px;
}
.signInHelp {
  width: 252px;
  margin: 48px auto 12px;
  text-align: center;
}
.signInHelpInfo {
  width: 252px;
  margin: 0 auto;
  .hn {
    cursor: pointer;
    color: #115AD4;
  }
}

</style>
